<template>
  <div>
    <TableHead @create="emit('create')" />
    <a-card class="mt-4">
      <a-table
        v-model:selected-keys="table.keys"
        :row-key="table.rowKey"
        :row-selection="{
          selectedRowKeys: table.keys
        }"
        :loading="table.loading"
        :data="table.data"
        :bordered="false"
        :columns="translateColumns(columns.columns)"
        :pagination="{
          current: query.pageNum,
          total: query.total,
          pageSize: query.pageSize
        }"
        @page-size-change="pageSizeChange"
        @page-change="pageChange"
      >
        <template #operation="{ record }">
          <div class="flex gap-2 justify-center">
            <a-button size="mini" @click="edit(record[table.rowKey])">
              <IconEdit />
            </a-button>
            <a-button @click="del(record[table.rowKey])">
              <template #icon>
                <IconDelete />
              </template>
            </a-button>
          </div>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { IQuery, TableConfig } from "@/interface/IAxios";
import columns from "./column";
import TableHead from "./Head.vue";

const props = defineProps<{
  query: IQuery;
  table: TableConfig<any>;
}>();

const emit = defineEmits(["create"]);

const list = async () => {
  props.table.loading = true;
  // TODO: 接口调用
  props.table.loading = false;
};

/* 编辑 */
const edit = (id: string) => {
  // TODO: 接口调用
};
/* 删除 */
const del = (id: string) => {
  // TODO: 接口调用
};

onMounted(async () => {
  await list();
});

const pageChange = (page: number) => {
  props.query.pageNum = page;
  list();
};
const pageSizeChange = (pageSize: number) => {
  props.query.pageNum = pageSize;
  list();
};
const search = () => {
  props.query.pageNum = 1;
  list();
};
const create = () => {
  emit("create");
};
defineExpose({
  search
});
</script>

<style lang="scss" scoped></style>
